<template>
  <view class="content">
    <x-nav-bar :title="sendData.title" />
    <view class="top-banner" v-if="topBannerList.length">
      <swiper class="home-swiper" circular="true" interval="3000" indicator-dots="true" autoplay
        indicator-active-color="#FF6000" indicator-color="#fff">
        <swiper-item class="swiper-item" v-for="(item,index) in topBannerList" :key="index">
          <image lazy-load :src="item.picUrl" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="list">
      <view class="tab-list ss-flex ss-row-center">
        <view class="tab-item" :class="{act: sendData.sort == 1}" @click="selTab(1)">最新</view>
        <view class="tab-item" :class="{act: sendData.sort == 2}" @click="selTab(2)">最热</view>
      </view>
      <view class="cont">
        <template v-if="dataList && dataList.length">
          <view class="cont-item ss-flex ss-row-between ss-p-20" v-for="item in dataList" :key="item.id"
            @click="sheep.$router.go('/pages/article/detail', { id: item.id,title: sendData.title})">
            <image :src="item.picUrl" mode="aspectFill"></image>
            <view class="detail ss-m-l-20">
              <view class="tit">{{item.title}}</view>
              <view class="txt">阅读量：{{item.browseCount}}</view>
            </view>
            <uni-icons type="right" color="#999" size="18"></uni-icons>
          </view>
          <uni-load-more :status="loadStatus" />
        </template>
        <s-empty v-else-if="dataList.length === 0 && noData" text="文章空空如也~" />
      </view>
    </view>
  </view>

</template>

<script setup>
  import sheep from '@/sheep';
  import {
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app';
  import {
    ref,
    reactive,
  } from 'vue';
  import ArticleApi from '@/sheep/api/promotion/article';
  const topBannerList = reactive([])
  let noData = ref(false)
  let loadStatus = ref('more')
  let dataList = reactive([])
  const sendData = reactive({
    pageNo: 1,
    pageSize: 40,
    title: '',
    sort: 1 // 1 最新  2 最热
  })
  // 选择tab
  const selTab = (index) => {
    sendData.sort = index
    sendData.pageNo = 1
    dataList.length = 0
    noData.value = false
    loadPage()
  }
  onLoad((options) => {
    if (options.title) {
      sendData.title = options.title
    }
    loadPage()
    getBanner()
  })
  // 加载列表
  const loadPage = () => {
    ArticleApi.getArticleList(sendData).then(res => {
      if (res.code === 0) {
        if (sendData.pageNo === 1) {
          dataList.splice(0, dataList.length); // 清空数组
        }
        if (res.data.list.length) {
          dataList.push(...res.data.list);
        }
        // 根据数据总量更新 loadStatus
        if (dataList.length >= res.data.total) {
          loadStatus.value = 'noMore';
        } else {
          loadStatus.value = 'more';
        }
        noData.value = true
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg,
        });
      }
    })
  }
  const getBanner = () => {
    ArticleApi.getArticleCategory({
      title: sendData.title
    }).then(res => {
      if (res.code == 0) {
        topBannerList.splice(0, topBannerList.length)
        topBannerList.push(res.data)
      }
    })
  }
  onReachBottom(() => {
    if (loadStatus.value != 'more') return
    loadStatus.value = 'loading'
    sendData.pageNo++
    loadPage()
  })
</script>

<style lang="scss" scoped>
  .content {
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    min-height: 100%;
    width: 100vw;

    .top-banner {
      height: 312rpx;
      width: 100vw;

      .home-swiper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        font-size: 0;
        overflow: hidden;

        .swiper-item image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .list {

      .tab-list {
        border-bottom: 1px solid #eee;

        .tab-item {
          text-align: center;
          line-height: 100rpx;
          font-size: 30rpx;
          font-weight: bold;
          width: 50%;

          &.act {
            color: #FF6000;
            position: relative;
            font-weight: bold;

            &:after {
              height: 4rpx;
              width: 100%;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              content: " ";
              background-color: #FF6000;
              bottom: 0;
            }
          }
        }
      }

      .cont {
        .cont-item {
          border-bottom: 1px solid #e9e9e9;
          font-size: 0;

          image {
            width: 180rpx;
            height: 120rpx;
          }

          .detail {
            flex: 1;
            line-height: 1.5;

            .tit {
              font-size: 32rpx;
              @include text-line(2);
            }

            .txt {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
</style>